<template>
    <!-- 声音广场中的分类查找组件 -->
    <div class="container">
        <div class="column category-column">
            <el-text>{{ props.category }}</el-text>
        </div>
        <div class="column button-column">
            <el-row class="row-bg" justify="start" style="margin: 0;">
                <el-col :span="24">
                    <div class="button-container" ref="buttonContainerRef">
                        <el-space wrap>
                            <div v-for="(item, index) in displayedRows" :key="index">
                                <el-button ref="buttonRefs" class=" dark_btbgcolor" style="height: 30px;" text
                                    size="small" @click="handleButtonClick(item)">{{ item }}</el-button>
                            </div>
                        </el-space>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="column toggle-column">
            <el-button size="small" text @click="toggleContent">{{ isCollapsed ? '更多' : '收起' }}
                <el-icon v-if="isCollapsed" class="el-icon--right">
                    <ArrowDown />
                </el-icon>
                <el-icon v-if="!isCollapsed" class="el-icon--right">
                    <ArrowUp />
                </el-icon>
            </el-button>
        </div>
    </div>
</template>

<script lang="ts">
export default {
    name: 'CategorySearch'
}
</script>

<script setup lang="ts">
import { ref, onMounted, defineEmits, defineProps } from 'vue';
// 导入 Vue 3 的组合式 API 函数，用于响应式数据、生命周期钩子和组件间通信
import {
    ArrowDown,
    ArrowUp
} from '@element-plus/icons-vue';
// 导入 Element Plus 的上下箭头图标组件，用于在模板中展示图标

// 控制显示的项目行数
const displayedRows = ref([]);
// 默认为折叠状态
const isCollapsed = ref(true);
// 按钮容器和按钮引用
const buttonContainerRef = ref(null);
// 按钮引用
const buttonRefs = ref([]);
//定义自定义事件
const emit = defineEmits(['categorySelected']);

/**
 * 接收来自父组件的数据
 * 
 * @param {String} category - 分类名称，用于标识一组相关的项目
 * @param {Array} items - 项目数组，包含多个项目对象
 */
const props = defineProps({
    category: String,
    items: Array,
});

// 动态计算显示的行数
const calculateDisplayedRows = () => {
    displayedRows.value = props.items;
    // 更新容器高度
    const container = buttonContainerRef.value;
    if (container && buttonRefs.value.length > 0) {
        const buttonHeight = buttonRefs.value[0].$el.offsetHeight;
        if (isCollapsed.value) {
            container.style.height = `${buttonHeight}px`; // 固定高度
        } else {
            container.style.height = 'auto'; // 自适应高度
        }
    }
};

// 显示/隐藏更多内容
const toggleContent = () => {
    isCollapsed.value = !isCollapsed.value;
    calculateDisplayedRows();
};

// 选中分类按钮事件
function handleButtonClick(item: string) {
    //触发自定义事件
    emit('categorySelected', item);
}

onMounted(() => {
    // 初始计算显示的行数
    calculateDisplayedRows();

    // 更新容器宽度
    const container = buttonContainerRef.value;
    if (container) {
        container.style.maxWidth = '100%'; // 最大宽度为100%
    }
});
</script>

<style scoped>
/* 样式部分 */
.container {
    display: flex;
    align-items: flex-start;
    /* 顶部对齐 */
    flex-direction: row;
    justify-content: center;
    width: 100%;

}

.column {
    padding: 0 0;
    box-sizing: border-box;
    margin-right: 20px;
}

.category-column {
    width: auto;
    margin-bottom: auto;
    /* 自适应宽度 */
    text-align: center;
    display: flex;
    align-items: flex-start;
    /* 顶部对齐 */
    justify-content: center;
    /* 居中对齐 */
}

.button-column {
    flex: 1;
    /* 自适应宽度 */
    overflow-x: hidden;
    /* 隐藏横向滚动条 */
    margin-bottom: auto;
}

.toggle-column {
    width: auto;
    margin-bottom: auto;
    /* 自适应宽度 */
    text-align: center;
    display: flex;
    align-items: flex-start;
    /* 顶部对齐 */
    justify-content: center;
    /* 居中对齐 */

    height: 30px;
    /* 初始高度为30px，只显示一个按钮高度的一行数据，可以根据实际需要调整 */
}

.el-row {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    /* 顶部对齐 */
}

.button-container {

    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    max-width: 100%;
    /* 最大宽度为100% */
    white-space: nowrap;
    /* 防止按钮折行 */
    overflow-y: hidden;
    /* 隐藏垂直滚动条 */
    height: 30px;
    /* 初始高度为30px，只显示一个按钮高度的一行数据，可以根据实际需要调整 */
    overflow: hidden;
    /* 隐藏横向纵向滚动条 */
    margin: 0;

}

.el-space {
    flex: 1;
}
</style>